<!-- 
        作者：戴荔春 
        时间：2015-07-13
        描述： 图片工具类相关
    H5照相功能
-->
<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script>
			document.write("<script type='text/javascript' src='../../js/core/RayApp/cacheControl.config.js?" + Math.random() + "'></scr" + "ipt>");
		</script>
		<script>
			SrcBoot.output([
				'css/mui.min.css',
				'css/common/common.css',
				'../../css/imgOperation/demo_imageTools.css'
			]);
		</script>

	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav bg-blue">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">图片操作</h1>
			<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right"></a>
		</header>
		<div class="mui-content">
			<video id="video" width="320" height="240" autoplay></video>
			<button id="snap">拍摄</button>
			<canvas id="canvas" width="320" height="240"></canvas>
			<script>
				window.addEventListener("DOMContentLoaded", function() {
					var canvas = document.getElementById("canvas"), //调用canvas接口
						context = canvas.getContext("2d"),
						video = document.getElementById("video"),
						videoObj = {
							"video": true
						},
						errBack = function(error) { //错误处理
							console.log("Video capture error: ", error.code);
						};
					if(navigator.getUserMedia) { //调用html5拍摄接口
						navigator.getUserMedia(videoObj, function(stream) {
							video.src = stream; //摄像机属于视频流，所以当然要输出到html5的video标签中了
							video.play(); //开始播放
						}, errBack);
					} else if(navigator.webkitGetUserMedia) { //WebKit内核调用html5拍摄接口
						navigator.webkitGetUserMedia(videoObj, function(stream) {
							video.src = window.webkitURL.createObjectURL(stream); //同上
							video.play(); //同上
						}, errBack);
					} else if(navigator.mozGetUserMedia) { //moz内核调用html5拍摄接口
						navigator.mozGetUserMedia(videoObj, function(stream) {
							video.src = window.URL.createObjectURL(stream); //同上
							video.play(); //同上
						}, errBack);
					}else{
					}
				}, false);

				document.getElementById("snap")
					.addEventListener("click", function() { //获取拍照按钮绑定事件
						var canvans = document.getElementById("canvas"), //调用canvas接口
							context = canvas.getContext("2d");
						context.drawImage(video, 0, 0, 640, 480); //调用canvas接口的drawImage方法绘制当前video标签中的静态图片，其实就是截图

						var imgData = canvans.toDataURL(); //获取图片的base64格式的数据
						//这里就可以写上传服务器代码了
						console.log("地址:"+imgData);
					});
			</script>
		</div>

	</body>

</html>